<template>
    <div class="login-logo">
        <div class="login">
            <el-form ref="editForm" label-width="80px" :inline="true" class="login-container" :model="userForm"
                :rules="rules">
                <div class="login-title">LOGIN IN</div>
                <el-form-item label="" prop="username" for="username">
                    <el-input v-model="userForm.username" class="username" :placeholder="errMsg" />
                </el-form-item>
                <el-form-item label="" prop="password" for="password">
                    <el-input id="password" v-model="userForm.password" placeholder="请输入密码" class="password"
                        show-password></el-input>
                </el-form-item>
                <el-form-item label="" prop="verifyCode" for="verifyCode">
                    <div style="width: 400px;height: 45px;margin: auto;">
                        <el-input id="verifyCode" v-model="userForm.verifyCode" placeholder="请输入验证码" class="verifyCode"
                            style="width: 150px;"></el-input>
                        <el-image style="float: right;width: 120px;height: 45px;border-radius: 10px;"
                            :src="imgObj.captchUrl" @click="getCaptch">
                        </el-image>
                    </div>
                </el-form-item>
                <div class="login-btn">
                    <el-button @click="loginBtn()" class="loginBtn" type="primary"
                        style="width:200px;letter-spacing: 0.2em;height: 45px;">Login</el-button>
                    <el-button @click="resetForm()" class="regsiter" style="width:65px;height:45px;">重置</el-button>
                </div>
                <div class="login-register">
                    <span>请点击这里进行用户<el-button type="text" class="registenBtn" @click="register()">注册</el-button></span>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import loginApi from '../api/LoginApi';
const router = useRouter();
//引入useCounterStore实例
import { useUserStore } from '../stores/userStore'
//创建stote实例
let store = useUserStore();
//定义验证码对象，用于接收与验证码相关数据
const imgObj = reactive({
    captchUrl: "", //验证码Base64字符串
})

//登录用户对象
const userForm = reactive({
    username: '',
    password: '',
    verifyCode: '',
    codeId: '',

});
//登录失败，显示错误信息
const errMsg = ref("请输入账号");

const rules = reactive({
    username:
        [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 3, max: 16, message: '字符长度在3都16个之间', trigger: 'blur' }
        ],
    password:
        [
            { required: true, message: '请输入用户密码', trigger: 'blur' },
            { min: 3, message: '密码长度不能低于3字符', trigger: 'blur' }
        ],
})
//用户登录方法
const loginBtn = async () => {
    let response = await store.login(userForm); //实现登录操作
    //判断用户是否登录成功
    if (store.userinfo.username) { //表示usernae有值
        //登录成功，跳转到后台首页页面
        router.push('/MainFrameView');
    } else { //表示登录失败
        ElMessage.error(response.message)
    }
}

//获取验证码图片
const getCaptch = async () => {
    //发送请求获取验证码信息
    let res = await loginApi.getCaptcha(userForm);
    if (res.data.success) {
        imgObj.captchUrl = res.data.data.imageBase64;
        userForm.codeId = res.data.data.codeId;
    } else {
        ElMessage.error("加载验证码失败");
    }
}
//重置按钮
const resetForm = () => {
    userForm.username = '';
    userForm.password = '';
    userForm.verifyCode = '';
    getCaptch();
}
//注册按钮
const register = ()=>{
    router.push('/RegisteView')
}
//vue对象挂载到元素时，自动触发onMounted函数，在函数中调用获取验证码方法
onMounted(() => {
    getCaptch();
})
//监听回车键，实现回车登录
function handleKeydown(event:any) {
  if (event.key === 'Enter') {
    // 这里写你的逻辑
    loginBtn();
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>


<style>
.login-logo {
    width: 100%;
    height: 735px;
    background-image: url("../assets/login-logo2.jpg");
    background-size: 100%;

}

.login {
    height: 370px;
    width: 400px;
    text-align: center;
    position: absolute;
    top: 35%;
    left: 50%;
    margin-left: -160px;
    margin-top: -160px;
    box-shadow: 0 0 25px rgb(67, 46, 37);
    border-radius: 10px;
    border: 1px solid rgb(170，170，170);
}

.login-title {
    text-align: center;
    margin: 20px 1px;
    font-size: 30px;
    font-weight: bold;
    color: blue;
    letter-spacing: 0.5em;
}

.el-form--inline .el-form-item {
    /* 设置用户名和密码框宽 */
    width: 280px;
}

.username {
    font-weight: bolder;
    margin-left: 1px;
    height: 45px;
    border-radius: 5px;
}

.password {
    font-weight: bolder;
    margin-left: 1px;
    height: 45px;
    width: 400px;
    border-radius: 5px;
    outline: none;

}

.verifyCode {
    float: left;
    font-weight: bolder;
    margin-left: 1px;
    height: 45px;
    width: 130px;
    border-radius: 10px;
    outline: none;
}

.login-btn {
    width: 280px;
    margin-left: 45px;
    text-align: left;
}

.login-register {
    margin-top: 5px;
    width: 280px;
    margin-left: 45px;
    text-align: left;
}

.login-register span {
    font-size: 13px;
}

.registenBtn {
    color: blue;
    cursor: pointer;
}

body {
    margin: 0px;
}
</style>